import React, { useState, useEffect } from 'react';
import styles from './index.less';

// import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';
// import { useStatisticsData } from '../../index';
import _cloneDeep from 'lodash/cloneDeep';
import { useSelector } from 'umi';
// import cls from 'classnames';

const _data = [
  {
    value: 100,
    title: '未开始',
    color: '#2FB0FF',
    icon: require('./images/未开始.png'),
    tooltip: require('./images/未开始箭头.png'),
  },
  {
    value: 100,
    title: '进行中',
    color: '#2FF3FF',
    icon: require('./images/进行中.png'),
    tooltip: require('./images/进行中箭头.png'),
  },
  {
    value: 455,
    title: '已完成',
    color: '#2FFF9F',
    icon: require('./images/已完成.png'),
    tooltip: require('./images/已完成箭头.png'),
  },
];

const Chart1 = () => {
  const rawData = useSelector(store => store.projectPage.statisticsData);

  const [data, setData] = useState(_data);

  useEffect(() => {
    if (!rawData) {
      return;
    }
    const newData = _cloneDeep(_data);
    newData[1].value =
      rawData.processTotalNumber -
      rawData.doingProcessTotalNumber -
      rawData.finishedProcessTotalNumber;
    newData[0].value = rawData.doingProcessTotalNumber;
    newData[2].value = rawData.finishedProcessTotalNumber;
    setData(newData);
  }, [rawData]);

  return (
    <div className={styles.box}>
      <div className={styles.boxInner}>
        <div className={styles.bar}>
          {data.map(({ value, color }) => (
            <div className={styles.barItem} style={{ WebkitFlexGrow: value, background: color }} />
          ))}
        </div>
        <div className={styles.tooltip}>
          {data.map(({ value, color, icon, tooltip, title }) => (
            <div className={styles.tooltipItem}>
              <div className="">
                <img src={tooltip} alt="" />
              </div>
              <div style={{ opacity: 0.85 }}>
                <img src={icon} style={{ marginRight: 8 }} />
                {title}
              </div>
              <div style={{ color, fontSize: 18 }}>{value}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
export default Chart1;
